<template>
  <div class="bodyContainer">
    <div class="back">
      <van-nav-bar
        :title="songInfo.name"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      >
        <template #right>
          <van-icon name="share-o" size="18" />
        </template>
      </van-nav-bar>
      <div class="container" v-if="songInfo.ar">
        <div class="author">{{ songInfo.ar[0].name }}</div>
        <div class="circle"></div>
        <img
          :class="['needle', isPlay ? 'needleRotate' : '']"
          src="../assets/needle.png"
          alt=""
        />
        <div :class="['discContainer', isPlay ? 'disAnimation' : '']" @click="lyric(songInfo.id)">
          <img class="disc" width="100%" src="../assets/disc.png" alt="" />
          <img class="songImg" :src="songInfo.al.picUrl" alt="" />
        </div>
      </div>

      <audio
        ref="musicAudio"
        :src="musicUrl"
        type=""
        @ended="musicEnd"
        @canplay="canplaySong"
        @timeupdate="timeUpdata"
        autoplay
      ></audio>

      <!-- 滑块 -->
      <van-slider @change="changeSild" v-model="songcurrent" active-color="#ee0a24" :min="0" :max="songDuraction">
        <template #button>
          <div class="custom-button"></div>
        </template>
      </van-slider>

      <!-- 底部 -->
      <div class="buttomControl">
        <i class="iconfont icon-24gl-repeat2"></i>
        <i class="iconfont icon-shangyiqu" @click="lastMusic()"></i>
        <i
          :class="['iconfont', isPlay ? 'icon-zanting' : 'icon-bofang', 'big']"
          @click="playMusic"
        ></i>
        <i class="iconfont icon-xiayiqu" @click="nextMusic()"></i>
        <i class="iconfont icon-gedan"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { getSongDetail, getMusicUrl,getlyric } from "@/request/api";
import { mapState } from "vuex";
export default {
  data() {
    return {
      isPlay: true,
      songInfo: {},
      musicUrl: "",
      index: this.$route.query.index,
      value: 0,
      songDuraction:0,
      songcurrent:0
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    playMusic() {
      this.isPlay = !this.isPlay;
      if (this.isPlay) {
        this.$refs.musicAudio.play();
      } else {
        this.$refs.musicAudio.pause();
      }
    },
    // 获取歌曲详情
    async getSongDetail(ids) {
      const { data: res } = await getSongDetail({
        ids,
      });
      if (res.code !== 200) return this.$toast("获取歌曲失败");
      //   console.log(res);
      this.songInfo = res.songs[0];
    },
    //获取歌曲url
    async getMusicUrl(id) {
      const { data: res } = await getMusicUrl({
        id,
      });
      //   console.log(res);
      if (res.code !== 200) return this.$toast("获取歌曲失败");
      this.musicUrl = res.data[0].url;
      // console.dir(this.$refs.musicAudio);
      // console.log(this.$refs.musicAudio.duration);
      // let d = document.querySelector('audio')
      // console.log(d.duration);
    },
    //上一曲
    lastMusic() {
      //  console.log(this.index);
      this.index === 0 ? (this.index = this.trackIds.length - 1) : this.index--;
      this.getMusicUrl(this.trackIds[this.index].id);
      this.getSongDetail(this.trackIds[this.index].id);
       this.$refs.musicAudio.play();
    },
    //下一曲
    nextMusic() {
      this.index === this.trackIds.length - 1 ? (this.index = 0) : this.index++;
      this.getMusicUrl(this.trackIds[this.index].id);
      this.getSongDetail(this.trackIds[this.index].id);
      this.$refs.musicAudio.play();
    },
    musicEnd() {
      // console.log("结束了");
      this.nextMusic();
    },

    canplaySong(){
      console.log(this.$refs.musicAudio.duration);
      this.songDuraction = this.$refs.musicAudio.duration
    },
    timeUpdata(e){
      // console.log(e.srcElement.currentTime);
      this.songcurrent = e.srcElement.currentTime
    },
    changeSild(value){
    //   // console.log('@');
      console.log(value);
      this.$refs.musicAudio.currentTime = value
    },
    // 歌词
    async lyric(id){
      const {data:res} = await getlyric({id})
      console.log(res);
      console.log(res.lrc.lyric);
    }
  },
  computed: {
    ...mapState(["trackIds"]),
  },
  created() {
    this.getSongDetail(this.$route.query.id);
    this.getMusicUrl(this.$route.query.id);
    this.lyric(this.$route.query.id)
    // console.log(this.trackIds);
  },
  mounted(){
    this.$refs.musicAudio.play();
  }
};
</script>

<style lang="less" scoped>
.bodyContainer {
  height: 100vh;
  background-color: rgb(56, 83, 100);
  // filter: blur(5px);
  // background-color: red;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  .author{
    color: #fff;
    font-size: 18px;
  }
  .circle {
    width: 30px;
    height: 30px;
    margin-top: 8px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 999;
  }
  .needle {
    position: relative;
    left: 30px;
    top: -15px;
    // border: 1px solid red;
    width: 100px;
    height: 135px;
    z-index: 99;
    transform-origin: 20px 0;
    transform: rotate(-20deg);
    transition: all 1s;
  }
  .needleRotate {
    transform: rotate(0deg);
  }
  .discContainer {
    position: relative;
    top: -85px;
    // border: 1px solid red;
    width: 300px;
    height: 300px;
    .songImg {
      width: 185px;
      height: 185px;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
  }
}
.sotpAni {
  animation-fill-mode: forwards;
}
.disAnimation {
  animation: disc 5s linear infinite;
  animation-delay: 1s;
}
@keyframes disc {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.buttomControl {
  color: #fff;
  display: flex;
  // background-color: red;
  width: 100%;
  height: 70px;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: 10px;
  i {
    font-size: 26px;
  }
  .big {
    font-size: 50px;
  }
}
.custom-button {
  width: 10px;
  height: 10px;
  color: #ccc;
  font-size: 7px;
  line-height: 14px;
  text-align: center;
  background-color: #fff;
  border-radius: 100px;
}
/deep/ .van-slider__bar {
  background-color: #1989fa !important;
}
.van-slider {
  width: 86%;
  margin: 0 20px;
  position: absolute;
  bottom: 130px;
}
</style>